<template>
  <div class="my-order-page">
    <van-nav-bar title="我的订单" left-arrow @click-left="goBack" />
    
    <!-- 订单状态标签页 -->
    <van-tabs v-model:active="activeTab" sticky @change="onTabChange">
      <van-tab title="全部">
        <order-list :orders="currentOrders" :loading="loading" />
      </van-tab>
      <van-tab title="待付款">
        <order-list :orders="currentOrders" :loading="loading" />
      </van-tab>
      <van-tab title="待确认">
        <order-list :orders="currentOrders" :loading="loading" />
      </van-tab>
      <van-tab title="已完成">
        <order-list :orders="currentOrders" :loading="loading" />
      </van-tab>
      <van-tab title="已取消">
        <order-list :orders="currentOrders" :loading="loading" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showLoadingToast, closeToast } from 'vant'
import OrderList from '@/components/order-list/index.vue'
import { getOrdersByStatus, getUnpaidOrders } from '@/api/order'
import { ORDER_STATUS, ORDER_STATUS_TEXT, TAB_TO_STATUS } from '@/constants/order'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTab = ref(0)
const orders = ref([])
const loading = ref(false)

// 根据当前选中的标签页获取对应订单
const currentOrders = computed(() => {
  return orders.value
})

// 获取订单列表
const getOrders = async (status = ORDER_STATUS.ALL) => {
  try {
    loading.value = true
    
    console.log('获取订单列表，状态:', status)
    
    let response
    if (status === ORDER_STATUS.UNPAID) {
      // 获取待付款订单
      response = await getUnpaidOrders(0, 20)
    } else {
      // 根据状态获取订单
      response = await getOrdersByStatus(status, 0, 20)
    }
    
    console.log('订单API响应:', response)
    
    // 处理响应数据
    if (response && response.items) {
      orders.value = response.items.map(order => ({
        id: order.id,
        orderNo: order.orderNo,
        status: order.status,
        statusText: ORDER_STATUS_TEXT[order.status] || '未知状态',
        totalPrice: order.totalPrice,
        finalTotalPrice: order.finalTotalPrice,
        createTime: order.createTime,
        items: order.snapItems || []
      }))
    } else {
      orders.value = []
    }
    
    console.log('处理后的订单数据:', orders.value)
    
  } catch (error) {
    console.error('获取订单列表失败:', error)
    showToast('获取订单列表失败')
    orders.value = []
  } finally {
    loading.value = false
  }
}

// 标签页切换
const onTabChange = (index) => {
  console.log('切换到标签页:', index)
  const status = TAB_TO_STATUS[index]
  getOrders(status)
}

// 返回上一页
const goBack = () => {
  router.push('/')
}

// 组件挂载时获取数据
onMounted(() => {
  // 根据路由参数设置当前标签页
  const key = route.query.key
  if (key !== undefined) {
    const tabIndex = parseInt(key)
    activeTab.value = tabIndex
  }
  
  // 获取对应状态的订单
  const status = TAB_TO_STATUS[activeTab.value]
  getOrders(status)
})
</script>

<style lang="scss" scoped>
.my-order-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
</style> 